<template>
  <div
    class="login u-f u-f-ac u-f-ajc"
    :style="`background:url(${loginBgm});background-size:cover`"
  >
    <section class="login-box animate__animated animate__slideInDown">
      <div class="login-left u-f u-f u-f-ac u-f-ajc">
        <img class="login-img" src="@/assets/icons/svg/login-img1.svg" />
      </div>
      <div class="login-right u-f u-f-ajc">
        <el-form
          :model="formModel"
          ref="formRef"
          class="login-form"
          status-icon
        >
          <h3 class="login-form-title u-f u-f-ac u-f-ajc">vueCms</h3>
          <el-form-item prop="username">
            <el-input
              v-model="formModel.username"
              type="text"
              placeholder="账号"
              @input="formModel.username = $event"
            >
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="formModel.password"
              type="password"
              auto
              -
              complete="off"
              placeholder="密码"
            />
            <!-- @keyup.enter.native = "handlSubmitLogiFor"
              @input="formModel".password = "$event" -->
          </el-form-item>
          <el-form-item prop="code">
            <div class="u-f u-f-ajs" style="width: 100%">
              <div>
                <el-input
                  placeholder="验证码"
                  style="width: 120px"
                  v-model.trim="formModel.code"
                ></el-input>
              </div>
            </div>
            <div>
              <PicCode
                ref="picCodeRef"
                :width="100"
                :height="38"
                v-model:code="code"
              />
            </div>
          </el-form-item>
          <div class="u-f u-f-ajs u-f-ac margin-bottom-15">
            <el-checkbox
              :checked="formModel.rememberMe"
              v-model="formModel.rememberMe"
            >
              记住密码
            </el-checkbox>
          </div>
          <el-form-item>
            <el-button
              class="margin-bottom-10"
              style="width: 100%"
              :loading="globalLoading"
              @click="handleSubmit(formRef)"
              type="primary"
            >
              登录
            </el-button>
            <el-button
              style="width: 100%; margin-left: 0px"
              type="warning"
              @click="handleReset(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
          <SvgIcon :size="'20px'" style="color: #79bbff" :iconClass="'qq'"/>
          <SvgIcon :size="'20px'" style="color: #79bbff" :iconClass="'gitee'"/>
        </el-form>
      </div>
    </section>
    <div class="footer text-style u-f u-f-ac u-f-ajc">
      Copyright 2023, vueCms_xg
      <a rel="noreferrer" target="_blank" href="https://beian.miit.gov.cn/#/Intergrated/index" class="text-style u-f-ajc margin-left-10">
        <img :src="ghs"
        alt="vueCms"/>
        粤ICP备11111111号
      </a>

    </div>
  </div>
</template>

<script setup lang="ts">
import loginBgm from "@/assets/img/loginBgm.png";
import { useFunc } from "@/views/login/hooks/useFunc";
import ghs from "@/assets/img/ghs.png"
import PicCode from "@/components/picCode"


let {
  formModel,
  formRef,
  code,
  picCodeRef,
  globalLoading,
  handleSubmit,
  handleReset,
} = useFunc();
</script>

<style scoped lang="less">
.login {
  height: 100vh;
  position: relative;
  background: linear-gradient(180deg, #2e3d4e, #001528);
  &-box {
    display: flex;
    width: 820px;
    height: 525px;
    z-index: 999;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
    .login-left {
      flex: 1;
      background: linear-gradient(60deg, rgb(39, 91, 214), rgb(16, 54, 171));
      .login-img {
        width: 100%;
        height: 100%;
        transition: all 0.3s;
        object-fit: cover;
      }
    }
    .login-right {
      width: 320px;
      height: 100%;
      box-sizing: border-box;
      background: white;
      .login-form {
        width: 84%;
        border-radius: 10px;
        .el-input {
          height: 38px;
          input {
            height: 38px;
          }
        }
        .login-form-title {
          font-weight: 700;
          position: relative;
        }
      }
    }
  }
}
.footer{
  margin:auto;
  width:100%;
  position:absolute;
  bottom:20px;
  left:0px;
}
.text-style{
  font-size: 12px;
  color:white;
    line-height: 16px;
}
</style>